<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">
  <title>loadingbar | LAYUI ADMIN</title>
  <link href="../../assets/favicon.ico" type="image/x-icon" rel="shortcut icon">
  <!-- style -->
  <link href="https://www.layuicdn.com/layui/css/layui.css" type="text/css" rel="stylesheet">
  <link href="../../css/admin.css" type="text/css" rel="stylesheet">
  <style>
    .btn {
      background-color: #ccc;
      color: #777;
    }

    .btn .layui-icon {
      margin-right: 0;
    }
    
    .wrapper {
      text-align: center;
      max-width: 460px;
      padding: 3em 20px;
      margin: 0 auto;
      padding: 16px;
      margin-top: 16px;
    }

    .wrapper p {
      margin-top: 2em;
      color: #888;
    }

    .wrapper.layui-card {
      padding-left: 2em;
      text-align: left;
      box-shadow: 0 5px 10px rgba(68, 88, 107, 0.2);
    }

    .wrapper.layui-card p {
      margin-top: 10px;
    }

    .logo {
      display: inline-block;
      font-size: 2em;
      text-align: center;
      font-weight: 200;
      line-height: 1.3;
      color: #333;
      margin: 0;
      border-bottom: 2px solid #009688;
    }

    .logo i {
      color: #aaa;
      font-style: normal;
      font-weight: 200;
    }

  </style>
</head>

<body class="layadmin-bg-white">
  <div class="layui-fluid">
    <header class="wrapper">
      <span class="logo"><i>layui.</i>loadingbar</span>
    </header>
    
    <div class="layui-card wrapper">
      <div class="layui-card-body">
        <p>
          <button type="button" class="layui-btn btn" lay-event="start">
            <i class="layui-icon layui-icon-triangle-r"></i>
          </button>
          <span class="layui-word-aux">
            loadingbar<b>.start</b> - 进度条开始
          </span>
        </p>
        <p>
          <button type="button" class="layui-btn btn" lay-event="pause">
            <i class="layui-icon layui-icon-triangle-r"></i>
          </button>
          <span class="layui-word-aux">
            loadingbar<b>.pause</b> - 进度条暂停
          </span>
        </p>
        <p>
          <button type="button" class="layui-btn btn" lay-event="finish">
            <i class="layui-icon layui-icon-triangle-r"></i>
          </button>
          <span class="layui-word-aux">
            loadingbar<b>.finish</b> - 进度条成功完成
          </span>
        </p>
        <p>
          <button type="button" class="layui-btn btn" lay-event="failed">
            <i class="layui-icon layui-icon-triangle-r"></i>
          </button>
          <span class="layui-word-aux">
            loadingbar<b>.failed</b> - 进度条错误完成
          </span>
        </p>
        <p>
          <button type="button" class="layui-btn btn" lay-event="set">
            <i class="layui-icon layui-icon-triangle-r"></i>
          </button>
          <span class="layui-word-aux">
            loadingbar<b>.set</b> - 进度条设置一个长度（0 - 100）
          </span>
        </p>
      </div>
    </div>
    
    <p class="wrapper">
      <a style="color:#1e9fff"> &gt; 配置直接阅读代码</a>
    </p>
  </div>
</body>

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
  layui.config({
    base: '../../js/'
  }).extend({
    loadingbar: 'components/loadingbar'
  }).use(['util', 'loadingbar'], function(util, loadingbar) {
    util.event('lay-event', {
      start: function() {
        loadingbar.start()
      },
      pause: function() {
        loadingbar.pause()
      },
      finish: function() {
        loadingbar.finish()
      },
      failed: function() {
        loadingbar.failed()
      },
      set: function() {
        var random = ~~(Math.random() * 100)
        loadingbar.set(random)
      }
    })
  })
</script>

</html>